<template>
  <a-card :bordered="false">


    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item :label="$t('reconciliation.bank')">
               <a-select v-model="queryParam.sex" :placeholder="$t('reconciliation.inputBank')">
                 <a-select-option value="">-</a-select-option>
                <!-- <a-select-option value="1">男性</a-select-option>
                <a-select-option value="2">女性</a-select-option> --> 
              </a-select>
            </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item :label="$t('reconciliation.type')">
               <a-select v-model="queryParam.sex" :placeholder="$t('reconciliation.inputType')">
                 <a-select-option value="">-</a-select-option>
                <!-- <a-select-option value="1">男性</a-select-option>
                <a-select-option value="2">女性</a-select-option> --> 
              </a-select>
            </a-form-item>
            </a-col>
            <a-col :md="16" :sm="24">
              <a-row :gutter="24">
                <a-col :md="24" :sm="24">
                  <span>{{$t('reconciliation.created')}}：</span>
                  <a-date-picker
                  style="width: 210px;"
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="$t('common.chooseTime')"
                />-<a-date-picker
                  style="width: 210px;"
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format=" yyyy-MM-dd HH:mm:ss"
                  :placeholder="$t('common.chooseTime')"
                />
                </a-col>
              </a-row>
              
            </a-col>
          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" >{{$t('common.queryBtnTxt')}}</a-button>
              <a-button style="margin-left: 8px" >{{$t('common.resetBtnTxt')}}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>


    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
      <a-button type="primary" icon="download">{{$t("common.expBtnTxt")}}</a-button>
      <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> {{$t('common.selectdTxt')}} <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
        <a style="margin-left: 24px" @click="onClearSelected">{{$t('common.ckeanAllBtnTxt')}}</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :locale="locale"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        >

        

      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  export default {
    name: "",
    mixins:[JeecgListMixin],
    data () {
      return {
        locale: {
emptyText:''
        },
        // 高级搜索 展开/关闭
        advanced: true,
        description:  this.$t('reconciliation.sysName'),
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
           },
		   {
            title: this.$t('reconciliation.bankOrder'),
            key:'reconciliation.bankOrder',
            align:"center",
            dataIndex: 'merchantId_dictText'
           },
		   {
            title: this.$t('reconciliation.ourOrder'),
             key:'reconciliation.ourOrder',
            align:"center",
            dataIndex: 'equipmentId_dictText'
           },
		   {
            title: this.$t('reconciliation.tradeTime'),
             key:'reconciliation.tradeTime',
            align:"center",
            dataIndex: 'orderNo'
           },
		   {
            title: this.$t('reconciliation.bankAmout'),
             key:'reconciliation.bankAmout',
            align:"center",
            dataIndex: 'amountStr'
           },
		   {
            title: this.$t('reconciliation.ourAmout'),
             key:'reconciliation.ourAmout',
            align:"center",
            dataIndex: 'type_dictText'
           },
		   {
            title: this.$t('reconciliation.bankServiceCharge'),
             key:'reconciliation.bankServiceCharge',
            align:"center",
            dataIndex: 'status_dictText'
           },
		   {
            title: this.$t('reconciliation.ourServiceCharge'),
             key:'reconciliation.ourServiceCharge',
            align:"center",
            dataIndex: 'payDate'
           },
		   {
            title: this.$t('reconciliation.bankResult'),
             key:'reconciliation.bankResult',
            align:"center",
            dataIndex: 'posTradeNo'
           },
            {
            title: this.$t('reconciliation.ourResult'),
             key:'reconciliation.ourResult',
            align:"center",
            dataIndex: 'posTradeNo'
           },
            {
            title: this.$t('reconciliation.finalResult'),
             key:'reconciliation.finalResult',
            align:"center",
            dataIndex: 'posTradeNo'
           },
          {
            title: this.$t('common.opBtnTxt'),
            key:'common.opBtnTxt',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
		url: {
         
       },
    }
  },
  computed: {
    importExcelUrl: function(){
    }
  },
    methods: {
    
    },
     watch:{
        '$store.state.app.lang':function(newLang, oldLang){
          let that = this;
          this.columns.map(c => {
            if(c['key']) {
              c.title = that.$t(c.key)
            }
            console.log(c)
          })
        }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>